<!--
 * @Author: xuzehan 123@qq.com
 * @Date: 2023-04-25 11:34:38
 * @LastEditors: xuzehan 123@qq.com
 * @LastEditTime: 2023-07-05 10:46:18
 * @FilePath: \ant-design-vue-jeecg-master\src\views\taskManagement\modules\flow.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <a-modal
      title="任务总流程详情"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
      width="55%"
    >
      <div class="content">
        <div class="apps">
          <!-- <div class="item-tail"/> -->
          <div class="appCont">
            <div class="arror box1" @click="handleInfo('1')">1 需求提交</div>
            <div class="arror box2" @click="handleInfo('2')">2 需求梳理</div>
            <div class="arror box3" @click="handleInfo('3')">3 星指链路频点信息配置</div>
            <div class="arror box4" @click="handleInfo('4')">4 指控车资源分配</div>
          </div>
        </div>
        <div class="apps">
          <div class="item-tail" />
          <div class="appCont">
            <div class="arror box5" @click="handleInfo('5')">5 指控车入网</div>
            <div class="arror box6" @click="handleInfo('6')">6 导弹信道申请</div>
            <div class="arror box7" @click="handleInfo('7')">7 星弹上行链路接收机频率配置</div>
            <div class="arror box7" @click="handleInfo('8')">8 导弹信道资源分配</div>
          </div>
        </div>
        <div class="netBoxss">
          <div class="item-tail" />
          <div class="netBoxs">
            <div class="netbody">
              <!-- <div class="item-tail" /> -->
              <div class="netBox box9-1" @click="handleInfo('9-1')">
                <span>9-1</span>
                <span>网络状态查询</span>
              </div>
            </div>
            <div class="netbody">
              <!-- <div class="item-tail" /> -->
              <div class="netBox box9-2" @click="handleInfo('9-2')">
                <span>9-2</span>
                <span>指控车控星指令鉴权</span>
                <!-- 9-2 指控车控星指令鉴权 -->
              </div>
            </div>
            <div class="netbody">
              <!-- <div class="item-tail" /> -->

              <div class="netBox box9-3" @click="handleInfo('9-3')">
                <span>9-3</span>
                <span>抗干扰上行决策与调整</span>
                <!-- 9-3 抗干扰上行决策与调整 -->
              </div>
            </div>
            <div class="netbody">
              <!-- <div class="item-tail" /> -->
              <!-- <span>9-4</span>
            <span>抗干扰下行决策与调整</span> -->
              <div class="netBox box9-4" @click="handleInfo('9-4')">
                <!-- 9-4 抗干扰下行决策与调整 -->
                <span>9-4</span>
                <span>抗干扰下行决策与调整</span>
              </div>
            </div>
            <div class="netbody">
              <!-- <div class="item-tail" /> -->
              <div class="netBox box9-5" @click="handleInfo('9-5')">
                <!-- 9-5 导弹状态上报 -->
                <span>9-5</span>
                <span>导弹状态上报</span>
              </div>
            </div>
          </div>
        </div>

        <div class="apps">
          <div class="item-tail" />
          <div class="appCont">
            <!-- <div class="arror box9" @click="handleInfo('9')"> 控星指令鉴权</div> -->
            <div class="arror box10" @click="handleInfo('10')">10 指控车退网</div>
            <div class="arror box11" @click="handleInfo('11')">11 指控车强制退网</div>
            <!-- <div class="arror box12" @click="handleInfo('12')">12 通信指控车退网</div> -->
          </div>
        </div>
      </div>

      <steps ref="steps" />
      <steps1 ref="steps1" />
    </a-modal>
  </div>
</template>

<script>
// import a from './a.vue'
import steps from './steps.vue'
import steps1 from './ceshi.vue'
export default {
  name: 'Flow',
  components: {
    // a,
    steps,
    steps1,
  },
  data() {
    return {
      visible: false,
      confirmLoading: false,
      obj2: [
        { label: '开始' },
        { label: '处理作战需求' },
        { label: '将星指上行链路变频器频点信息封装成复合链路帧' },
        { label: '将星指下行链路变频器频点信息封装成复合链路帧' },
        { label: '将复合链路帧发送到业务及综合管理单元' },
      ],
      obj4: [
        { label: '开始' },
        { label: '指控车向通信管控发送指控车入网申请' },
        { label: '通信管控向指控车回复入网应答信息' },
        { label: '指控车向通信管控发送入网确认信息' },
        { label: '通信管控更新指控车入网状态' },
      ],
      obj3: [
        { label: '开始' },
        { label: '通信管控封装星指上行链路时隙分配信息复合链路帧' },
        { label: '通信管控向卫星发送星指上行链路时隙分配信息' },
        { label: '卫星向通信管控发送星指上行链路时隙资源分配响应信息' },
        { label: '通信管控向指控车周期性广播星指链路上行时隙分配信息' },
      ],
      obj7: [
        { label: '开始' },
        { label: '指控车向通信管控发送导弹资源分配申请' },
        { label: '通信管控向指控车发送导弹资源分配信息' },
        { label: '指控车向通信管控发送导弹资源分配应答' },
        { label: '通信管控向卫星发送上行链路接收机频率配置指令' },
      ],
      obj9: [
        { label: '开始' },
        { label: '指控车向通信管控发送控星指令鉴权申请' },
        { label: '通信管控进行指令集对比' },
        { label: '通信管控向卫星发送控星指令' },
        { label: '通信管控向指控车发送控星指令鉴权回复' },
      ],
      obj12: [
        { label: '开始' },
        { label: '指控车向通信管控发起退网申请' },
        { label: '通信管控向指控车回复退网响应' },
        { label: '指控车向通信管控发送退网确认' },
        { label: '通信管控收到退网确认后，释放指控车占用的资源' },
        { label: '地面网络管控向卫星发送资源释放指令' },
      ],
    }
  },
  methods: {
    handleInfo(val) {
      if (val == 10) {
        this.$refs.steps1.showModal()
      } else {
        let str = `obj${val}`
        if (this[str]) {
          // console.log(this.str)
          this.$refs.steps.showModal(JSON.stringify(this[str]))
        } else {
          return
        }
      }
    },
    showModal(val) {
      console.log(val)
      const that = this
      this.visible = true
      // console.log(`.box${val}`)
      this.$nextTick(() => {
        // document.getElementById("div").classList.remove("类名")
        that.removeClass()
        if (val) {
          let selection = document.querySelector(`.box${val}`)
          selection.classList.add('targer')
        }
      })
    },
    removeClass() {
      let BoxList1 = document.querySelectorAll('.arror')
      console.log(BoxList1)
      let BoxList2 = document.querySelectorAll('.netBox')
      let BoxLists = [...BoxList1, ...BoxList2]
      BoxLists.forEach((el) => {
        el.classList.remove('targer')
      })
      // console.log(BoxList)
    },
    handleOk(e) {
      this.confirmLoading = true
      setTimeout(() => {
        this.visible = false
        this.confirmLoading = false
      }, 2000)
    },
    handleCancel(e) {
      console.log('Clicked cancel button')
      this.visible = false
    },
  },
}
</script>
<style scoped lang="less">
.apps,
.netBoxss {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .item-tail {
    width: 2px;
    height: 30px;
    background: rgba(0, 0, 0, 0.65);
    position: relative;
    margin-bottom: 20px;
  }
  .item-tail:after {
    content: '';
    border-top: solid 10px rgba(0, 0, 0, 0.65);
    border-left: solid 10px #00800000;
    border-right: solid 10px #00800000;
    border-bottom: solid 0px #00800000;
    position: absolute;
    left: -9px;
    top: 100%;
  }
  .appCont {
    display: flex;
  }
}
// .netBoxss {
//   height: 100%;
//   display: flex;
//   flex-direction: column;
//   align-items: center;
//   justify-content: center;
//   .item-tail {
//     width: 2px;
//     height: 30px;
//     background: rgba(0, 0, 0, 0.65);
//     position: relative;
//     margin-bottom: 20px;
//   }
//   .item-tail:after {
//     content: '';
//     border-top: solid 10px rgba(0, 0, 0, 0.65);
//     border-left: solid 10px #00800000;
//     border-right: solid 10px #00800000;
//     border-bottom: solid 0px #00800000;
//     position: absolute;
//     left: -9px;
//     top: 100%;
//   }
//   .appCont {
//     display: flex;
//   }
// }
.netBoxs {
  display: flex;
  line-height: 50px;
  flex-wrap: wrap;
  margin: 0 15px;
  padding: 5px 10px;
  justify-content: space-evenly;
  border: 1px solid #e3e3e3;

  .netbody {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 15px auto;
  }
  // .item-tail {
  //   width: 2px;
  //   height: 30px;
  //   background: rgba(0, 0, 0, 0.65);
  //   position: relative;
  //   margin-bottom: 20px;
  // }
  // .item-tail:after {
  //   content: '';
  //   border-top: solid 10px rgba(0, 0, 0, 0.65);
  //   border-left: solid 10px #00800000;
  //   border-right: solid 10px #00800000;
  //   border-bottom: solid 0px #00800000;
  //   position: absolute;
  //   left: -9px;
  //   top: 100%;
  // }
}
.netBox {
  // width: 160px;
  height: 60px;
  border: 5px dashed #b8b5b5;
  border-radius: 25px;
  text-align: center;
  font-size: 16px;
  // margin-right: 20px;
  color: #e3e3e3;
  padding: 0px 15px;
  display: flex;
  flex-direction: column;
  line-height: 22px;
}
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.arror {
  color: #e3e3e3;
  position: relative;
  width: 150px;
  height: 60px;
  padding-left: 20px;
  font-size: 18px;
  text-align: center;
  // line-height: 30px;

  border: 1px solid #ccc;
  &::before {
    display: block;
    content: '';
    position: absolute;
    right: -44px;
    top: 0;
    z-index: 2;
    width: 0;
    height: 0;
    border-left: 15px solid #042c5d;
    border-right: 30px solid transparent;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
  }
  &::after {
    display: block;
    content: '';
    position: absolute;
    right: -45px;
    top: 0;
    width: 0;
    height: 0;
    border-left: 15px solid #ccc;
    border-right: 30px solid transparent;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
  }
}
.targer {
  background-color: skyblue;
  color: rgba(0, 0, 0, 0.65);
  &::before {
    display: block;
    content: '';
    position: absolute;
    right: -44px;
    top: 0;
    width: 0;
    height: 0;
    border-left: 15px solid skyblue;
    border-right: 30px solid transparent;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
  }
  &::after {
    display: block;
    content: '';
    position: absolute;
    right: -45px;
    top: 0;
    width: 0;
    height: 0;
    border-left: 15px solid skyblue;
    border-right: 30px solid transparent;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
  }
}
</style>

<style lang="less">
.box {
  // background-color: rgb(245, 212, 212);
  height: 500px;
  // width: 20px;
  .box-item:nth-child(n + 2) {
    border-left: 1px solid transparent;
  }
  .box-item {
    height: 50px;
    width: 150px;
    display: inline-block;
    line-height: 50px;
    padding-left: 25px;
    border: 1px solid;
    border-right: 1px solid transparent;
    position: relative;
    border-right: 0;
    margin-bottom: 15px;
    box-sizing: border-box;
    position: relative;
    &::after {
      position: absolute;
      top: 0px;
      right: 25px;
      content: '';
      display: block;
      border-top: 24px solid transparent;
      border-bottom: 24px solid transparent;
      border-left: 24px solid #fff;
      border-right: 24px solid transparent;
      // transform: translate(125px, -50px);
      z-index: 2;
    }
    &::before {
      position: absolute;
      top: 0px;
      right: 25px;
      content: '';
      display: block;
      border-top: 25px solid transparent;
      border-bottom: 25px solid transparent;
      border-left: 25px solid red;
      border-right: 25px solid transparent;
      // transform: translate(124px, -51px);
      z-index: 1;
      margin-left: 0px;
    }
  }
}
</style>
